<template>
	<div class="admin_index_wrapper">
		<el-row :gutter="16" type="flex">
			<el-col :span="18">
				<resource-data :data="statData"></resource-data>
			</el-col>
			<el-col :span="6">
				<div class="user_notice_box">
					<user-info :data="statData"></user-info>
					<sys-notice></sys-notice>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="16" type="flex">
			<el-col :span="18">
				<el-row :gutter="16" type="flex">
					<el-col :span="12">
						<hot-resource></hot-resource>
					</el-col>
					<el-col :span="12">
						<type-scale :data="statData"></type-scale>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="6">
				<quick-access></quick-access>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import userInfo from './userInfo';
import sysNotice from './sysNotice';
import typeScale from './typeScale';
import hotResource from './hotResource';
import quickAccess from './quickAccess';
import resourceData from './resourceData';
import { getHomeStatData } from '@/api/statistics';
export default {
	components: { resourceData, userInfo, sysNotice, hotResource, typeScale, quickAccess },
	data() {
		return {
			statData: {}
		}
	},
	computed: {
		...mapGetters(['userInfo']),
		userInfoData() {
			return { ...this.userInfo, myCollect: this.statData.myCollect, myShare: this.statData.myShare }
		},
		resourceData() {
			let datas = this.statData;
			let daySumResult = datas.daySumResult || {};
			return {
				count: {
					total: datas.zyAllCount,
					added: daySumResult.addSum,
					download: daySumResult.downSum,
					browse: daySumResult.browseSum,
				},
				stat: datas.statResult
			}
		}
	},
	watch: {
		userInfoData(data) {
			console.log(data);
		}
	},
	mounted() {
		this.getHomeStatData();
	},
	methods: {
		//获取首页统计数据
		async getHomeStatData() {
			let result = await getHomeStatData(5).then(res => res.data);
			if(result.code === '0') {
				this.statData = !!result.data && result.data.length > 0 ? result.data[0] : {};
				console.log(this.statData);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.admin_index_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px 16px 0;
	overflow: auto;

	.el-row {
		&:nth-child(1) {
			flex: 3;
		}

		&:nth-child(2) {
			flex: 2;
		}

		.el-row {
			height: 100%;
		}
	}
}

.user_notice_box::v-deep {
	display: flex;
	flex-direction: column;
}
</style>